<%@ page contentType="text/html" pageEncoding="UTF-8"%>
<%@ taglib prefix="html" uri="/struts-tags"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<html:head/>
<link rel="stylesheet" type="text/css"
	href="/ComputerStore/public/css/admin_content.css">
<script type="text/javascript"
	src="/ComputerStore/public/js/jquery-1.6.2.min.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<style type="text/css">
#addImportButton {
	text-decoration: none;
	color: white;
	border-style: ridge;
	border-radius: 0px 20px;
	background-color: #555;
	border-style: ridge;
}
</style>
<title>Quản lý phiếu nhập hàng</title>

</head>
<body>

	<h1>Quản lý phiếu nhập hàng</h1>
	<div id="options">
		<a id="showList" href="#">&nbsp;&nbsp;&nbsp;Danh sách phiếu nhập
			hàng&nbsp;&nbsp;&nbsp;</a> <a id="showForm" href="#">&nbsp;&nbsp;&nbsp;Lập
			phiếu nhập hàng&nbsp;&nbsp;&nbsp;</a>
	</div>
	<br />

	<!-- Table danh sách phiếu nhập hàng -->
	<div id="list">
		<div class="title">Danh sách phiếu nhập hàng</div>
		<div class="content" align="center">
			<table border="1">
				<tr>
					<th>Số thứ tự</th>
					<th>Nhà cung cấp</th>
					<th>Ngày nhập</th>
					<th>Tổng tiền</th>
					<th>Thao tác</th>
				</tr>
				<html:iterator value="importBillList" var="importBill"
					status="itStatus">
					<tr id="<html:property value="id"/>">
						<td align="center"><html:property value="#itStatus.Count" /></td>
						<td><html:property value="supplier.name" /></td>
						<td><html:property value="dateImported" /></td>
						<td><html:property value="total" /></td>
						<td align="center"><a class="operation" name="select"
							href="#" id="<html:property value="id"/>" >&nbsp;Chọn&nbsp;</a></td>
					</tr>
				</html:iterator>
			</table>
		</div>
	</div>

	<!-- table chi tiết phiếu nhập hàng -->
	<div id="detailList">
		<div class="title">Chi tiết phiếu nhập hàng</div>
		<div class="content" align="center">
			<table border="1" id="detailTable">
				<tr>
					<th>Tên sản phẩm</th>
					<th>Số lượng</th>
					<th>Đơn giá</th>
					<th>Thành tiền</th>
				</tr>
				<html:iterator value="detailList" var="importBillDetail">
					<tr id="<html:property value="id"/>">					
					<td style="display:none"><html:property value="importBill.id" /></td>
					<td><html:property value="product.name" /></td>
					<td><html:property value="productQuantity" /></td>
					<td><html:property value="productPrice" /></td>
					<td><html:property value="total" /></td>
					</tr>
				</html:iterator>
			</table>
		</div>
	</div>

	<!-- Lập phiếu nhập hàng -->
	<div id="formAdd">
		<div class="title">Lập phiếu nhập hàng</div>
		<div class="content" align="center">
			<html:form action="addImportBill" method="post" id="form1" validate="true">
				<html:select cssClass="textfield" id="supplierAddSelect"
					label="Nhà cung cấp" name="supplier.id" list="supplierList"
					listKey="id" listValue="name" />
				<html:select cssClass="textfield" id="productAddSelect"
					label="Tên mặt hàng" name="product.id" list="productList"
					listKey="price+','+id+','+quantity" listValue="name" />
				<html:textfield cssClass="textfield" id="priceAddTextfield"
					label="Giá sản phẩm" disabled="true" size="50" />
				<html:textfield cssClass="textfield" id="priceImportAddTextfield"
					label="Giá nhập" value="0" size="50" />
					<html:textfield cssClass="textfield" id="quantityInventoryAddTextfield"
					label="Số lượng tồn" disabled="true" size="25" />
				<html:textfield cssClass="textfield" id="quantityAddTextfield"
					label="Số lượng nhập" name="quantity" size="50" required="true"/>	
				<html:submit id="button" disabled="true" value="Nhập hàng" />			
				<html:a id="addImportButton" href="#">&nbsp;&nbsp;Thêm vào đơn hàng&nbsp;&nbsp;</html:a>
				
			</html:form>
			<table border="1" id="addImportTable" style="display: none">
				<tr>
					<td colspan="5" align="center"
						style="font-weight: 900; color: red;"><div>
							Tổng tiền: <span id="totalPrice">0</span>
						</div>
					<td>
				</tr>
				<tr>
					<th>Tên sản phẩm</th>
					<th>Số lượng</th>
					<th>Đơn giá</th>
					<th>Thành tiền</th>
					<th>Thao tác</th>
				</tr>
			</table>
		</div>
	</div>

	<!-- Javascript -->
	<script>
		$(document)
				.ready(
						function() {
							var count = 0;
							var total = 0;
							var id = 1;
							
							$("#quantityInventoryAddTextfield").val($("#productAddSelect").val().split(",")[2].trim());
							$("#priceAddTextfield").val($("#productAddSelect").val().split(",")[0].trim());
							$("#detailList").css("display", "none");
							$("#formEdit").css("display", "none");
							$("#formAdd").css("display", "none");
							$("#showList").css("border-style", "inset");

							$("#showForm").click(function() {
								$(this).css("border-style", "inset");
								$("#showList").css("border-style", "outset");
								$("#list").hide("fast");
								$("#formEdit").hide("fast");
								$("#detailList").hide("fast");
								$("#formAdd").show("fast");
							});

							$("#showList").click(function() {
								$(this).css("border-style", "inset");
								$("#showForm").css("border-style", "outset");
								$("#formAdd").hide("fast");
								$("#formEdit").hide("fast");
								$("#detailList").hide("fast");
								$("#list").show("fast");
							});

							$("#productAddSelect").change(function(){
								var price = $(this).val().split(",")[0].trim();
								var quantity = $("#productAddSelect").val().split(",")[2].trim();
								$("#priceAddTextfield").val(price);
								$("#quantityInventoryAddTextfield").val(quantity);
							});
							
							$("a").click(function(){
								if($(this).attr("name")=="select"){
									$("#list").hide("fast");
									$("#detailList").show("fast");
									$("#showList").css("border-style", "outset");
									var id = $(this).attr("id");
									$("#detailTable td").each(function(i){
										var col= i%5;
										if(col==0 && $(this).text()== id){
											$(this).parent().show("fast");									
										}
										if(col==0 && $(this).text()!= id){
											$(this).parent().hide("fast");
										}										
									});
								}
							});

							$("#addImportButton")
									.click(
											function() {
												if ($("#quantityAddTextfield")
														.val() != "") {
													$("#addImportTable").show(
															"slow");
													var product = $(
															"#productAddSelect")
															.find(
																	'option:selected')
															.text();
													var productId = $(
															"#productAddSelect")
															.attr("value")
															.split(",")[1]
															.trim();
													var quantity = $(
															"#quantityAddTextfield")
															.val();
													var price = $("#priceImportAddTextfield").val();

													total = 0;
													var targetExits = 0;
													$("#addImportTable td")
															.each(
																	function(i) {
																		if (i > 1) {
																			var col = (i - 2) % 6;
																			totalPrice = 0;
																			if (col == 0) {
																				var id = $(this).text();
																				if (id == productId) {
																					targetExits = i + 2;
																				}
																			}
																			if (i == targetExits&& i != 0) {
																				$(this).text(quantity);
																			}
																			if(i == targetExits+1&& i != 1){
																				$(this).text(price);
																			}
																			if (i == targetExits + 2
																					&& i != 2) {
																				totalPrice = quantity
																						* price;
																				$(
																						this)
																						.text(
																								totalPrice);
																				totalPrice = price
																						* quantity;
																			}
																		}
																	});

													if (targetExits == 0) {
														totalPrice = quantity
																* price;
														var tr = $("<tr id='"+"tr"+productId+"'>");
														var col1 = $("<td style='display:none'>"
																+ productId
																+ "</td>");
														var col2 = $("<td>"
																+ product
																+ "</td>");
														var col3 = $("<td>"
																+ quantity
																+ "</td>");
														var col4 = $("<td>"
																+ price
																+ "</td>");
														var col5 = $("<td>"
																+ totalPrice
																+ "</td>");
														var col6 = $("<td><a id='"+"tr"+productId+"' class='operation' name='deleteRow' href='#'>Xóa</></td></tr>");
														tr.append(col1);
														tr.append(col2);
														tr.append(col3);
														tr.append(col4);
														tr.append(col5);
														tr.append(col6);
														$("#addImportTable")
																.append(tr);
														targetExits = 0;
														id++;
														count++;
														$("#supplierAddSelect").attr("disabled",true);
														$("#button").attr("disabled",false);
													}

													$("#addImportTable td")
															.each(
																	function(i) {
																		var col = (i - 2) % 6;
																		if (col == 4) {
																			total += parseInt($(
																					this)
																					.text());
																		}
																	});
													$("#totalPrice")
															.text(total);

												}
											});
							$("a").live({
								click : function() {
									if ($(this).attr("name") == "deleteRow") {
										var a = $(this).attr("id");
										$("#" + a + " td").each(function(i) {
											if (i == 4) {
												value = $(this).text();
											}
										});

										total -= value;
										$("#totalPrice").text(total);
										$(this).parent().parent().remove();
										count--;
										if (count == 0) {
											$("#button").attr("disabled",true);
											$("#supplierAddSelect").attr("disabled",false);
											$("#addImportTable").hide("slow");
										}
									}
								}
							});
							$("#button")
									.click(
											function() {
												$("#supplierAddSelect").attr("disabled",false);
												$("#addImportTable td")
														.each(
																function(i) {
																	if (i > 1) {
																		var idProductHidden;
																		var quantityHidden;
																		var priceHidden;
																		var col = (i - 2) % 6;
																		if (col == 0) {
																			idProductHidden = $('<html:hidden name="selectedProductList.id" value="'+ $(this).text()+ '"/>');
																			$("#form1").append(idProductHidden);
																		} else if (col == 2) {
																			quantityHidden = $('<html:hidden name="quantityList" value="'+ $(this).text()+ '"/>');
																			$("#form1").append(quantityHidden);
																		}else if(col ==3){
																			priceHidden = $('<html:hidden name="importBillDetailList.productPrice" value="'+ $(this).text()+ '"/>');
																			$("#form1").append(priceHidden);
																		}
																		
																	}
																});
											});
						});
	</script>
</body>
</html>